<!-- eslint-disable vue/no-unused-vars -->
<!-- eslint-disable vue/no-duplicate-attributes -->
<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <!-- <div class="title">
      <a-tabs type="line" v-model="admin" auto-switch @tab-click="tabClick">
        <a-tab-pane title="系统支付" :key="1" />
        <a-tab-pane title="客户支付" :key="0" /></a-tabs
    ></div> -->

    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachRef" :model="seachForm">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        v-model="type"
                        @change="typeFn"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" placeholder="请输入搜索条件"
                        ><template #suffix>
                          <icon-plus @click="open" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="mode" hide-label>
                    <a-select
                      class="width100"
                      v-model="seachForm.mode"
                      placeholder="请选择支付方式"
                      allow-clear
                    >
                      <a-option :value="0">支付宝</a-option>
                      <a-option :value="1">微信</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="merchantType" hide-label>
                    <a-select
                      class="width100"
                      v-model="seachForm.merchantType"
                      placeholder="请选择支付渠道"
                      allow-clear
                    >
                      <a-option
                        v-for="item in merchantTypeList"
                        :key="item.type"
                        :value="item.type"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select
                      class="width100"
                      v-model="seachForm.type"
                      placeholder="请选择支付类型"
                      allow-clear
                    >
                      <a-option v-for="item in title1111" :key="item.type" :value="item.type">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="close" hide-label>
                    <a-select
                      class="width100"
                      v-model="seachForm.close"
                      placeholder="请选择支付状态"
                      allow-clear
                    >
                      <a-option :value="1">关闭</a-option>
                      <a-option :value="0">开启</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="seachForm.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (seachForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (seachForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (seachForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (seachForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (seachForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (seachForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (seachForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (seachForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (seachForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (seachForm.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="seachForm.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      placeholder="请选择结束创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (seachForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (seachForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (seachForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (seachForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (seachForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (seachForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (seachForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (seachForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (seachForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (seachForm.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input-number
                        hide-button
                        v-model="seachForm.addBalance"
                        placeholder="请输入开始收款总额"
                      />
                      <a-input-number
                        hide-button
                        v-model="seachForm.endBalance"
                        placeholder="请输入结束收款总额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                        ><template #icon> <icon-search /> </template>搜索</a-button
                      >
                      <a-button @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <div style="display: flex">
          <a-button type="primary" style="margin-right: 20px" html-type="submit" @click="payAdd"
            >新建</a-button
          >
          <a-button
            type="outline"
            style="margin-right: 20px"
            status="warning"
            :loading="loading"
            @click="exportChannelLists"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
          <a-button
            style="margin-right: 20px"
            type="outline"
            status="warning"
            html-type="submit"
            @click="addPayes"
            >支付模板</a-button
          >
          <a-upload
            action="/app/user/file/upload/static"
            :file-list="listTXT"
            @success="onSuccesss"
            @error="onErrorS"
          >
            <template #upload-button>
              <a-button type="outline">微信上传txt文件</a-button>
            </template>
          </a-upload>
        </div>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tables.tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'payTemplate'" #cell="{ record }">
                {{ record.payTemplate.merchantNo }}
              </template>
              <template v-if="item.key === 'name'" #cell="{ record }">
                <div style="display: flex; align-items: center">
                  <img class="img" v-if="record.mode == 0" src="@/assets/alipay.png" alt="" /><img
                    class="img"
                    v-else
                    src="@/assets/wechat.png"
                    alt=""
                  />
                  <div
                    v-if="record.name.length < 6"
                    style="
                      width: 90px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ record.name }}</div
                  >
                  <a-tooltip v-else :content="record.name">
                    <div
                      style="
                        width: 90px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      >{{ record.name }}</div
                    >
                  </a-tooltip>
                </div>
              </template>
              <template v-if="item.key === 'payTemplates'" #cell="{ record }">
                {{ record.payTemplate.name }}
              </template>

              <template v-if="item.key === 'mode'" #cell="{ record }">
                <a-space>
                  <div v-if="record.mode == 1" color="arcoblue">微信</div>
                  <div v-else color="red">支付宝</div>
                </a-space>
              </template>
              <template v-if="item.key === 'remark'" #cell="{ record }">
                <a-space>
                  <div v-if="record.remark">{{ record.remark }}</div>
                  <div v-else>---</div>
                </a-space>
              </template>
              <template v-if="item.key === 'type'" #cell="{ record }">
                <div v-if="record.type == 0"> 微信内支付</div>
                <div v-if="record.type == 1">APP内支付 </div>
                <div v-if="record.type == 2">手机浏览器内支付 </div>
                <div v-if="record.type == 3">电脑浏览器内支付 </div>
                <div v-if="record.type == 4">系统支付 </div>
              </template>

              <template v-if="item.key === 'close'" #cell="{ record }">
                <a-switch
                  v-model="record.close"
                  :checked-value="false"
                  :unchecked-value="true"
                  @change="changeState(record)"
                >
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>
              </template>
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space>
                  <a-button size="small" type="text" class="butten" @click="payEdit(record)">
                    编辑
                  </a-button>
                  <a-button
                    size="small"
                    class="butten"
                    type="text"
                    style="color: #3491fa"
                    @click="payCopy(record)"
                  >
                    复制
                  </a-button>
                  <a-button size="small" class="butten" type="text" @click="payDelete(record.id)">
                    删除
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 列表 -->
    <a-modal
      v-model:visible="modal.visible"
      :mask-closable="false"
      width="50%"
      @before-close="merchantTypes = ''"
    >
      <template #title> 支付模板 </template>
      <a-row :gutter="10">
        <a-col :span="6">
          <a-input-group>
            <a-select style="width: 50%" v-model="types" @change="typeFns" placeholder="first">
              <a-option v-for="item in typeListsa" :key="item.name" :value="item.value">{{
                item.name
              }}</a-option>
            </a-select>
            <a-input style="width: 50%" v-model="typeTexts" placeholder="请输入搜索条件" />
          </a-input-group>
        </a-col>
        <a-col :span="6"
          ><a-select
            style="margin-bottom: 10px; width: 100%"
            v-model="formTele.merchantType"
            placeholder="请选择支付渠道"
            allow-clear
          >
            <a-option v-for="item in merchantTypeList" :key="item.type" :value="item.type">{{
              item.name
            }}</a-option>
          </a-select></a-col
        >
        <a-col :span="6">
          <a-date-picker
            class="width100"
            v-model="formTele.addTime"
            show-time
            :disabledDate="changeTraceEnds"
            placeholder="请选择开始创建时间"
            :time-picker-props="{ defaultValue: '12:00:00' }"
            format="YYYY-MM-DD HH:mm:ss"
            :shortcuts="[
              {
                label: '今日',
                value: () => (
                  (formTele.addTime = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '昨日',
                value: () => (
                  (formTele.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                    .subtract(1, 'day')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                    .subtract(1, 'day')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '七日',
                value: () => (
                  (formTele.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                    .subtract(6, 'day')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '本月',
                value: () => (
                  (formTele.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                    'YYYY-MM-DD HH:mm:ss'
                  )),
                  (formTele.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '上月',
                value: () => (
                  (formTele.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                    .subtract(1, 'month')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs()
                    .subtract(1, 'month')
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
            ]"
        /></a-col>
        <a-col :span="6"
          ><a-date-picker
            class="width100"
            v-model="seachForm.endTime"
            show-time
            :disabledDate="changeTraceStarts"
            placeholder="请选择结束创建时间"
            :time-picker-props="{ defaultValue: '12:00:00' }"
            :shortcuts="[
              {
                label: '今日',
                value: () => (
                  (formTele.addTime = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '昨日',
                value: () => (
                  (formTele.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                    .subtract(1, 'day')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                    .subtract(1, 'day')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '七日',
                value: () => (
                  (formTele.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                    .subtract(6, 'day')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '本月',
                value: () => (
                  (formTele.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                    'YYYY-MM-DD HH:mm:ss'
                  )),
                  (formTele.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '上月',
                value: () => (
                  (formTele.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                    .subtract(1, 'month')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (formTele.endTime = $dayjs()
                    .subtract(1, 'month')
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
            ]"
        /></a-col>
        <a-col :span="6"
          ><a-input-group style="margin-bottom: 10px; width: 100%">
            <a-input-number
              hide-button
              v-model="formTele.addBalance"
              placeholder="请输入开始收款总额"
            />
            <a-input-number
              hide-button
              v-model="formTele.endBalance"
              placeholder="请输入结束收款总额"
            /> </a-input-group
        ></a-col>
        <a-col :span="6"
          ><a-button
            type="primary"
            style="margin-bottom: 10px"
            html-type="submit"
            @click="doRefreshTemplates(1)"
            >搜索</a-button
          ><a-button
            style="margin-bottom: 10px; margin-left: 10px"
            html-type="submit"
            @click="resetTel"
            >重置</a-button
          ></a-col
        >
      </a-row>

      <a-button
        type="primary"
        style="margin-bottom: 10px"
        html-type="submit"
        @click=";(modal.templatesVisible = true), (mo = '新建模板')"
        ><template #icon> <icon-plus /> </template>新建</a-button
      >
      <a-button
        style="margin-bottom: 10px; margin-left: 10px"
        html-type="submit"
        @click="exportChannelListss"
        >导出</a-button
      >
      <a-table
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :loading="templatesTables.tableLoading"
        :data="templatesTables.templatesList"
        :column-resizable="true"
        :rowKey="rowKey"
        :columns="tableColumns.templateList"
        table-layout-fixed
        hide-expand-button-on-empty
        :default-expand-all-rows="true"
        :pagination="false"
      >
        <template #columns>
          <a-table-column
            v-for="item of tableColumns.templateList"
            :key="item.key"
            align="left"
            :title="(item.title as string)"
            :width="item.width"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'payTemplate'" #cell="{ record }">
              {{ record.merchantNo }}
            </template>

            <template v-if="item.key === 'mode'" #cell="{ record }">
              <a-space>
                <div v-if="record.mode == 0" color="arcoblue">微信</div>
                <div v-else color="red">支付宝</div>
              </a-space>
            </template>
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space>
                <a-button
                  size="small"
                  type="text"
                  style="color: #3491fa"
                  class="butten"
                  @click="templateEdit(record)"
                >
                  编辑
                </a-button>
                <a-button
                  size="small"
                  class="butten"
                  type="text"
                  style="color: #3491fa"
                  @click="templateCopy(record)"
                >
                  复制
                </a-button>
                <a-button
                  size="small"
                  class="butten"
                  type="text"
                  style="color: #3491fa"
                  @click="templateDelete(record.id)"
                >
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter ref="tableFooterRef" :pagination="paginations" />
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 编辑模板 -->
    <a-modal
      v-model:visible="modal.templatesVisible"
      width="600px"
      title-align="start"
      :mask-closable="false"
      @before-close="templatesBefo"
    >
      <template #title> {{ mo }} </template>
      <a-form ref="templatesRef" :auto-label-width="true" :model="templatesForm">
        <a-form-item label="支付渠道" field="merchantType" asterisk-position="end" required>
          <a-select
            :disabled="templatesForm.id ? true : false"
            placeholder="请选择支付渠道"
            v-model="templatesForm.merchantType"
            allow-clear
            class="width100"
            @change="merchantTypeChange"
            @clear=";(templatesForm.parameters = []), (certificates = [])"
          >
            <a-option v-for="item in merchantTypeList" :key="item.type" :value="item.type">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="模板名称" field="name" asterisk-position="end" required>
          <a-input
            placeholder="请输入模板名称"
            class="width100"
            v-model.trim="templatesForm.name"
          />
        </a-form-item>
        <a-divider dashed style="margin-bottom: 25px">支付信息</a-divider>
        <a-form-item label="商户号" field="merchantNo" asterisk-position="end" required>
          <a-input
            placeholder="请输入商户号"
            class="width100"
            v-model.trim="templatesForm.merchantNo"
          />
        </a-form-item>
        <a-form-item
          v-for="(item, index) in templatesForm.parameters"
          :key="item.index"
          :field="item.value"
        >
          <template #label>
            <div>{{ item.name }} <span v-if="item.required" style="color: red">*</span> </div>
          </template>
          <a-input
            class="width100"
            v-model="item.value"
            :placeholder="`请输入${item.name}`"
            @change="ce"
          />
        </a-form-item>
        <a-form-item v-for="(item, index) in certificates" :key="index">
          <template #label>
            <div>{{ item.name }} <span v-if="redirect" style="color: red">*</span> </div>
          </template>
          <a-upload
            action="/app/user/file/upload/private"
            @success="onSuccess"
            :limit="1"
            @error="onError"
            @click="clicks(index)"
          />
          <template #extra>
            <div v-if="item.value">已上传</div>
          </template>
        </a-form-item>
      </a-form>
      <!-- <template #footer>
        <a-space>
          <a-button @click="templatesBefo">取消</a-button>
          <a-button type="primary" @click="ok">确定</a-button>
        </a-space>
      </template> -->
      <template #footer>
        <a-space v-if="templatesForm.id">
          <a-button @click="templatesBefo">取消</a-button>
          <a-button type="primary" @click="ok">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between; width: 100%">
          <a-checkbox v-model="checked2">继续新建下一个模板</a-checkbox>
          <a-space>
            <a-button @click="templatesBefo">取消</a-button>
            <a-button type="primary" @click="ok">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 编辑支付 -->
    <a-modal
      v-model:visible="modal.payVisible"
      width="650px"
      title-align="start"
      :mask-closable="false"
      @before-close="payClose"
    >
      <template #title> {{ payTitle }} </template>
      <a-form ref="payRef" :auto-label-width="true" :model="payForm">
        <a-form-item
          label="支付方式"
          field="mode"
          :rules="[{ required: true, message: '请选择支付方式' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-radio-group v-model="payForm.mode" class="radio-bcg" @change="merchantTypeFn">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">微信</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">支付宝</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="支付模板"
          field="templateId"
          :rules="[{ required: true, message: '请选择支付模板' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-select
            id="seleate"
            placeholder="请选择支付模板"
            v-model="payForm.templateId"
            allow-clear
            allow-search
            @change="merchantTypeChanges"
          >
            <a-option v-for="item in listmkl" :key="item.id" :value="item.id"
              >{{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="客户账号"
          required
          v-if="seachForm.admin == 0 && !payForm.id"
          field="userId"
          asterisk-position="end"
        >
          <a-select
            class="width100"
            :disabled="payForm.id ? true : false"
            v-model="payForm.userId"
            placeholder="请选择客户"
            allow-clear
          >
            <a-option v-for="item in userList" :key="item.id" :value="item.id">{{
              item.userName
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-divider dashed style="margin-bottom: 25px">支付信息</a-divider>
        <a-form-item
          label="支付名称"
          field="name"
          :rules="[
            { required: true, message: '请输入支付名称' },
            { minLength: 1, maxLength: 20, message: '长度在 1 - 20个字符' },
          ]"
          asterisk-position="end"
        >
          <a-input placeholder="请输入支付名称" v-model.trim="payForm.name" />
        </a-form-item>
        <a-form-item
          label="支付类型"
          field="type"
          :rules="[{ required: true, message: '请选择支付类型' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-select placeholder="请选择支付类型" @change="changetype" v-model="payForm.type">
            <a-option v-for="item in title1111" :key="item.type" :value="item.type">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="payForm.type != 4 && payForm.templateId"
          label="支付产品"
          field="product"
          :rules="[{ required: true, message: '请选择支付产品' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-radio-group v-model="payForm.product" class="radio-bcg">
            <a-radio v-for="item in products" :key="item.type" :value="item.type">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="payForm.id" label="支付状态" field="close">
          <a-radio-group class="radio-bcg" v-model="payForm.close">
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="payForm.type != 4" label="支付推荐" field="recommend">
          <a-radio-group class="radio-bcg" v-model="payForm.recommend">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="payForm.type !== 4" label="手续费" field="serviceCharge">
          <a-input-number placeholder="请输入充值手续费" v-model="payForm.serviceCharge" />
        </a-form-item>
        <a-form-item v-if="payForm.type != 4" label="排序" field="sort">
          <a-input placeholder="请输入支付排序" v-model.trim="payForm.sort" />
        </a-form-item>
        <a-form-item label="备注" field="remarks">
          <a-input placeholder="请输入备注" v-model.trim="payForm.remarks" />
        </a-form-item>
      </a-form>

      <template #footer>
        <a-space v-if="payForm.id">
          <a-button @click="payClose">取消</a-button>
          <a-button type="primary" @click="okPay">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between; width: 100%">
          <a-checkbox v-model="checked1">继续新建下一个支付</a-checkbox>
          <a-space>
            <a-button @click="payClose">取消</a-button>
            <a-button type="primary" @click="okPay">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea
        style="width: 100%"
        v-model="card"
        placeholder="请输入搜索条件，一行一个"
        allow-clear
      />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import {
    templatesList,
    templatesPayList,
    systemPayList,
    addTemplates,
    updateTemplates,
    deleteTemplates,
    addPay,
    updatePay,
    deletePay,
    exportPay,
  } from '@/api/user'
  import useCommonStore from '@/store/modules/common'
  import { post, get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  const admin = ref(1)
  const mo = ref('新建模板')
  const table = useTable()
  //支付模板搜索条件支付渠道
  const merchantTypes = ref('')
  const pagination = usePagination(doRefresh)
  const paginations = usePagination(doRefreshTemplates)
  const payTitle = ref('新建支付')
  const seachRef = ref()
  const formTele = ref({
    name: '',
    merchantNo: '', //商户号
    merchantType: '', //支付渠道
    addTime: '',
    endTime: '',
    addBalance: '',
    endBalance: '',
  })
  const templatesRef = ref()

  const title1111: any = ref([])

  const payRef = ref()

  const loading = ref(false)
  const checked1 = ref(false)
  const checked2 = ref(false)
  const useCommon = useCommonStore()
  const redirect = ref('')
  const listmkl: any = ref([])

  const rowKey = useRowKey('id')
  const products: any = ref([])
  const type: any = ref('merchantNo')
  const typeText: any = ref('')
  const types: any = ref('merchantNo')
  const typeTexts: any = ref('')

  const certificates: any = ref([])
  const card = ref('')
  const cardsVisible = ref(false)
  const userList: any = ref([])
  const aList: any = ref([])

  const typeLists = ref([
    {
      name: '商户号',
      value: 'merchantNo',
    },
    {
      name: '支付名称',
      value: 'name',
    },
    {
      name: '模板名称',
      value: 'templateName',
    },
  ])
  const typeListsa = ref([
    {
      name: '商户号',
      value: 'merchantNo',
    },
    {
      name: '模板名称',
      value: 'name',
    },
  ])

  const modal = ref({
    visible: false,
    templatesVisible: false,
    payVisible: false,
    paySystemVisible: false,
    randomVisible: false,
    num: 0,
    path: 0,
    moda: 0,
  })

  const listTXT = ref([])

  const templatesForm: any = ref({
    name: '',
    merchantType: '',
    merchantNo: '',
    parameters: [],
    certificates: [],
  })

  const payForm: any = ref({
    templateId: '',
    product: '',
    name: '', //支付名称
    mode: 1, //支付方式 0支付宝 1微信
    type: 0, //支付类型 0公众号 1浏览器 2APP 3系统提现 参考/app/pay/get/type接口
    recommend: true, //是否推荐
    sort: 0, //排序
    close: false, //状态true关闭,  false正常
    serviceCharge: 0,
    remarks: '',
  })

  const seachForm: any = reactive({
    admin: 1,
    name: '',
    templateName: '',
    userId: '',
    merchantNo: '', //商户号
    merchantType: '', //支付渠道
    mode: '', // 支付方式
    close: '', //状态
    addTime: '',
    endTime: '',
    addBalance: '',
    endBalance: '',
  })

  function typeFn() {
    for (var key in seachForm) {
      if (key !== type.value) {
        seachForm[key] = ''
      }
    }
    seachForm.admin = admin.value
  }

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
  })

  const templatesTables: any = reactive({
    tableLoading: false,
    templatesList: [],
  })

  const merchantTypeList: any = ref([])

  const tableColumns: any = reactive({
    list: [
      {
        title: '支付ID',
        key: 'id',
        dataIndex: 'id',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '支付名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '支付商户号',
        key: 'payTemplate',
        dataIndex: 'payTemplate',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '收款总额',
        key: 'accumulation',
        dataIndex: 'accumulation',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '支付状态',
        key: 'close',
        dataIndex: 'close',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '支付渠道',
        key: 'merchantName',
        dataIndex: 'merchantName',
        align: 'left',
        checked: true,
        width: 120,
      },

      {
        title: '支付类型',
        key: 'type',
        dataIndex: 'type',
        align: 'left',
        checked: true,
        width: 150,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'left',
        checked: true,
        width: 190,
      },
      {
        title: '支付备注',
        key: 'remark',
        dataIndex: 'remark',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 150,
        fixed: 'right',
      },
    ],
    templateList: [
      {
        title: '模板名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '支付渠道',
        key: 'merchantName',
        dataIndex: 'merchantName',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '支付商户号',
        key: 'payTemplate',
        dataIndex: 'payTemplate',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '收款总金额',
        key: 'accumulation',
        dataIndex: 'accumulation',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'left',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 150,
        fixed: 'right',
      },
    ],
    paySystem: [
      {
        title: '支付方式',
        key: 'type',
        dataIndex: 'type',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '默认支付',
        key: 'select',
        dataIndex: 'select',
        align: 'left',
        checked: true,
        width: 120,
      },
      {
        title: '支付推荐',
        key: 'recommend',
        dataIndex: 'recommend',
        align: 'left',
        checked: true,
        width: 120,
      },
    ],
  })

  const colse = () => {
    cardsVisible.value = false
  }
  const open = () => {
    cardsVisible.value = true
  }

  function resetTel() {
    formTele.value = {
      name: '',
      merchantNo: '', //商户号
      merchantType: '', //支付渠道
      addTime: '',
      endTime: '',
      addBalance: '',
      endBalance: '',
    }
    typeTexts.value = ''
    types.value = 'merchantNo'
    doRefreshTemplates(1)
  }

  function cardsFn() {
    const arr = card.value.split(/\n/g)
    console.log(arr)
    typeText.value = arr.toString()
    cardsVisible.value = false
  }

  function changetype() {
    payForm.value.recommend = true
    payForm.value.close = false
    payForm.value.sort = ''
  }

  function title() {
    title1111.value = []
    useCommon.typePays().then((res) => {
      res.data.forEach((item: any) => {
        if (item.type != 4) {
          title1111.value.push(item)
        }
      })
    })
  }

  // function userFn() {
  //   useCommon.userLists().then((res) => {
  //     userList.value = res.data
  //   })
  // }

  const clicks = (val: any) => {
    modal.value.num = val
  }

  const exportChannelLists = () => {
    loading.value = true
    Object.keys(seachForm).forEach(function (key: any) {
      if (key == type.value) {
        seachForm[key] = typeText.value
      }
    })
    useCommon
      .downLoads(exportPay, seachForm, '支付列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportChannelListss = () => {
    loading.value = true
    formTele.value[types.value] = typeTexts
    useCommon
      .downLoads('/app/user/pay/templates/export', formTele.value, '支付模板')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const payDelete = (val: number) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此支付？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: deletePay,
          data: {
            id: val,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          }
        })
      },
    })
  }

  const payEdit = (val: any) => {
    payTitle.value = '编辑支付'
    merchantTypeFn(val.mode)
    payForm.value = JSON.parse(JSON.stringify(val))
    aList.value.forEach((item: any) => {
      if (item.id == val.templateId) {
        console.log(1111111)
        modal.value.moda = item.merchantType
        if (item.aliProducts && item.wechatProducts) {
          console.log(2222)
          if (payForm.value.mode == 0) {
            products.value = item.aliProducts
          } else {
            products.value = item.wechatProducts
          }
        } else {
          if (item.merchantType == 0) {
            products.value = item.aliProducts
          } else {
            products.value = item.wechatProducts
          }
        }
      }
    })
    console.log(aList.value)
    modal.value.payVisible = true
  }

  const payClose = () => {
    payRef.value.resetFields()
    payForm.value.id = ''
    payForm.value.product = ''
    modal.value.moda = 0
    modal.value.payVisible = false
  }

  const okPay = () => {
    payForm.value.name = payForm.value.name.split(/\s+/).join('')
    if (payForm.value.remarks) {
      payForm.value.remarks = payForm.value.remarks.split(/\s+/).join('')
    }

    payRef.value.validate((error: any) => {
      if (!error) {
        if (!payForm.value.sort) {
          payForm.value.sort = 0
        }
        if (!payForm.value.serviceCharge) {
          payForm.value.serviceCharge = 0
        }
        if (payForm.value.id) {
          updatePays()
        } else {
          payForm.value.close = false
          if (checked1.value == false) {
            addPays(payForm.value)
          } else {
            post({
              url: addPay,
              data: {
                ...payForm.value,
              },
            }).then((res: any) => {
              if (res.code == 0) {
                Message.success(res.msg)
                payRef.value.resetFields()
                payForm.value.id = ''
                payForm.value.product = ''
                modal.value.moda = 0
                checked1.value = false

                doRefresh()
              }
            })
          }
        }
      }
    })
  }

  const payCopy = (val: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要复制此支付？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        val.name = val.name + '-复制'
        addPays(val)
      },
    })
  }

  const addPays = (val: any) => {
    post({
      url: addPay,
      data: {
        ...val,
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success(res.msg)
        payClose()
        doRefresh()
      }
    })
  }

  const updatePays = () => {
    post({
      url: updatePay,
      data: {
        ...payForm.value,
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success(res.msg)
        payClose()
        doRefresh()
      }
    })
  }

  function changeState(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要改变套餐状态吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        post({
          url: updatePay,
          data: {
            ...item,
          },
        }).then((res: any) => {
          if (res.code == 0) {
            Message.success(res.msg)
            payClose()
            doRefresh()
          }
        })
      },
    })
  }

  const templatesListFn = () => {
    get({
      url: templatesList,
      data: {},
    }).then((res: any) => {
      if (res.code == 0) {
        aList.value = res.data
      }
    })
  }

  const payAdd = () => {
    payTitle.value = '新建支付'
    templatesListFn()
    merchantTypeFn(payForm.value.mode)
    modal.value.payVisible = true
  }

  const templateDelete = (val: number) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此模板？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: deleteTemplates,
          data: {
            id: val,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefreshTemplates()
          }
        })
      },
    })
  }

  const templateCopy = (val: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要复制此模板？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        val.name = val.name + '-复制'
        add(val)
      },
    })
  }

  const onSuccess = (response: any) => {
    modal.value.path = 1
    templatesForm.value.certificates[modal.value.num].value = response.response.data.path
    Message.success('上传成功')
  }

  const onSuccesss = () => {
    listTXT.value = []
    Message.success('上传成功')
  }

  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
  }

  const onErrorS = (fileItem: any) => {
    listTXT.value = []
    Message.error(fileItem.response.msg)
  }

  const templateEdit = (val: any) => {
    mo.value = '修改模板'
    templatesForm.value = JSON.parse(JSON.stringify(val))
    // templatesForm.value.parameters.forEach((items: any) => {
    //   items.names = '支付参数'
    // })
    certificates.value = templatesForm.value.certificates
    modal.value.templatesVisible = true
  }

  const templatesBefo = () => {
    templatesRef.value.resetFields()
    templatesForm.value.parameters = []
    templatesForm.value.certificates = []
    certificates.value = []
    templatesForm.value.id = ''
    modal.value.path = 0
    templatesForm.value = {
      name: '',
      merchantType: '',
      merchantNo: '',
      parameters: [],
      certificates: [],
    }
    modal.value.templatesVisible = false
  }

  const ok = () => {
    if (modal.value.path == 1) {
      templatesForm.value.certificates = certificates.value
    } else {
      if (templatesForm.value.certificates) {
        templatesForm.value.certificates.forEach((item: any) => {
          if (!item.value) {
            templatesForm.value.certificates = null
          }
        })
      }
    }
    if (templatesForm.value.name) {
      templatesForm.value.name = templatesForm.value.name.split(/\s+/).join('')
    }
    if (templatesForm.value.merchantNo) {
      templatesForm.value.merchantNo = templatesForm.value.merchantNo.split(/\s+/).join('')
    }
    if (templatesForm.value.parameters) {
      templatesForm.value.parameters.forEach((item: any, index: any) => {
        templatesForm.value.parameters[index].value = item.value.split(/\s+/).join('')
      })
    }

    console.log(templatesForm.value.parameters)
    if (templatesForm.value.id) {
      update()
    } else {
      add(templatesForm.value)
    }
  }

  const add = (val: any) => {
    if (checked2.value == true) {
      post({
        url: addTemplates,
        data: {
          ...val,
        },
      }).then((res: any) => {
        if (res.code == 0) {
          Message.success(res.msg)
          templatesRef.value.resetFields()
          templatesForm.value.parameters = []
          templatesForm.value.certificates = []
          certificates.value = []
          templatesForm.value.id = ''
          modal.value.path = 0
          checked2.value = false
          templatesForm.value = {
            name: '',
            merchantType: '',
            merchantNo: '',
            parameters: [],
            certificates: [],
          }
          doRefreshTemplates()
        }
      })
    } else {
      post({
        url: addTemplates,
        data: {
          ...val,
        },
      }).then((res: any) => {
        if (res.code == 0) {
          Message.success(res.msg)
          templatesBefo()
          doRefreshTemplates()
        }
      })
    }
  }

  const update = () => {
    post({
      url: updateTemplates,
      data: {
        ...templatesForm.value,
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success(res.msg)
        templatesBefo()
        doRefreshTemplates()
      }
    })
  }

  const merchantTypeChange = (val: any) => {
    templatesForm.value.merchantType = val
    modal.value.moda = val.merchantType
    merchantTypeList.value.forEach((item: any) => {
      if (item.type == val) {
        redirect.value = item.requiredCertificate
        templatesForm.value.parameters = item.parameters
        templatesForm.value.certificates = item.certificates
        certificates.value = item.certificates
        // templatesForm.value.parameters.forEach((items: any) => {
        //   items.names = '支付参数'
        // })
      }
    })
  }

  const merchantTypeFn = (val: any) => {
    payForm.value.product = ''
    let lists: any = []
    aList.value.forEach((item: any) => {
      if (val == 1) {
        if (item.wechatProducts) {
          lists.push(item)
        }
      } else {
        if (item.aliProducts) {
          lists.push(item)
        }
      }
    })
    listmkl.value = lists
  }
  const merchantTypeChanges = (val: any) => {
    payForm.value.product = ''
    aList.value.forEach((item: any) => {
      if (item.id == val) {
        payForm.value.name = item.name
        modal.value.moda = item.merchantType
        if (item.aliProducts && item.wechatProducts) {
          if (payForm.value.mode == 0) {
            products.value = item.aliProducts
          } else {
            products.value = item.wechatProducts
          }
        } else {
          if (payForm.value.mode == 0) {
            products.value = item.aliProducts
          } else {
            products.value = item.wechatProducts
          }
        }
      }
    })
    payForm.value.product = products.value[0].type
  }

  const ce = () => {
    console.log(templatesForm)
  }

  const addPayes = async () => {
    await doRefreshTemplates()
    await (modal.value.visible = true)
  }

  const tabClick = async (val) => {
    seachForm.userId = ''
    seachForm.admin = val
    console.log(seachForm.admin)
    doRefresh(1)
  }

  const resetSeach = () => {
    seachRef.value.resetFields()
    doRefresh(1)
  }

  function doRefreshTemplates(val?: any) {
    templatesTables.tableLoading = true
    seachForm.admin = admin.value
    if (val) {
      paginations.page = val
    }
    formTele.value[types.value] = typeTexts
    get({
      url: templatesPayList,
      data: {
        ...formTele.value,
        admin: seachForm.admin,
        page: paginations.page,
        size: paginations.pageSize,
      },
    }).then((res: any) => {
      templatesTables.tableLoading = false
      res.data.list.forEach((item: any) => {
        merchantTypeList.value.forEach((items: any) => {
          if (item.merchantType == items.type) {
            item.merchantName = items.name
          }
        })
      })
      paginations.setTotalSize((res.data as any).totalSize)
      templatesTables.templatesList = res.data.list
    })
  }

  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    Object.keys(seachForm).forEach(function (key: any) {
      if (key == type.value) {
        seachForm[key] = typeText.value
      }
    })
    get({
      url: systemPayList,
      data: {
        ...seachForm,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res: any) => {
      tables.tableLoading = false
      res.data.list.forEach((item: any) => {
        merchantTypeList.value.forEach((items: any) => {
          if (item.payTemplate.merchantType == items.type) {
            item.merchantName = items.name
          }
        })
      })
      console.log(res.data.list)
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  const merchantType = () => {
    useCommon.merchantTypes().then((res) => {
      merchantTypeList.value = res.data
    })
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(seachForm.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(seachForm.addTime).getTime() //小于开始时间的不选
  }

  onMounted(async () => {
    await merchantType()
    await doRefreshTemplates()
    await doRefresh()
    await title()
    await templatesListFn()
  })
</script>

<style lang="less" scoped>
  .img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  :deep(.arco-tabs-nav-extra) {
    margin-right: 20px;
  }
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 0px;
  }
  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding: 0;
  }

  .title {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;
  }

  .box {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
      cursor: pointer;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
  :deep(.arco-form-item-label) {
    width: 85px;
    text-align: left;
    height: 18px;
  }

  :deep(.arco-col-5) {
    flex: none;
    width: auto;
  }

  :deep(.arco-divider-horizontal) {
    margin: 7px 0;
  }
  :deep(.arco-divider-text) {
    top: 0;
    line-height: 1;
  }
</style>
